<template>
  <div id="login-box">
    <div>
      <h1>欢迎注册</h1>
    </div>

    <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
      <el-form-item label="账号" prop="principal">
        <el-input v-model="ruleForm.principal"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="credential">
        <el-input type="password" v-model="ruleForm.credential"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-radio v-model="ruleForm.avatar" :label="defalutAvatar" @change="defaultAvatar">默认</el-radio>
        <el-radio v-model="ruleForm.avatar" label="" @change="defaultAvatar">自定义</el-radio>
      </el-form-item>

      <el-form-item v-if="uploadFlag">
        <el-upload ref="upload" action="http://localhost:8001/qiniu/upload" class="upload-item" drag multiple
          :auto-upload="false" :on-success="onSuccessCallBack" :on-change="onChangeCallBack" :on-error="onErrorCallBack">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
        </el-upload>
      </el-form-item>
      <el-form-item v-else>
        <div class="block">
          <span class="demonstration">默认</span>
          <el-image :src="defalutAvatar" fit="cover" :lazy="true"></el-image>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-link @click="go('/login')">已有账号？快去登录</el-link>
  </div>
</template>

<script>
  import {
    login,
    checkUniquePrincipal,
    register
  } from '@/api/User.js'

  export default {
    data() {
      return {
        ruleForm: {
          principal: '',
          nickName: '',
          credential: '',
          avatar: 'http://server.forgirl.top/default.jpg'
        },
        uploadFlag: false,
        defalutAvatar: 'http://server.forgirl.top/default.jpg',
        rules: {
          principal: [{
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 11,
              message: '长度在 1 到 11 个字符',
              trigger: 'blur'
            }
          ],
          nickName: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 9,
              message: '长度在 1 到 9 个字符',
              trigger: 'blur'
            }
          ],
          credential: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 16,
              message: '长度在 6 到 16 个字符',
              trigger: 'blur'
            }
          ]
        },
        uploadFile: null
      };
    },
    methods: {
      submitForm(formName) {
        var that = this

        if (this.uploadFlag == true) {
          this.submitUpload()
        }

        register(this.ruleForm).then(resp => {
          that.$message({
            message: '注册成功',
            type: 'success'
          });
          that.$store.commit({
            type: 'setUser',
            value: resp.data
          })
          that.$router.push(that.$route.query.redirect)
        }).catch(error => {
          console.log(error)
          that.$message.error('注册失败，请稍后再试');
        })


      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      defaultAvatar(value) {
        if (value == '') {
          this.uploadFlag = true
        } else {
          this.uploadFlag = false
        }
      },

      submitUpload() {
        this.$refs.upload.submit();
      },

      onSuccessCallBack(response, file, fileList) {
        this.ruleForm.avatar = response.data.key
      },

      onErrorCallBack(response, file, fileList) {
        this.$message.error('头像上传失败，请稍后尝试')
        console.log(response)
      },

      onChangeCallBack(file, fileList) {
        this.uploadFile = file
      },

      go(path) {
        this.$router.push(path)
      }
    }
  }
</script>
<style>
  #login-box {
    text-align: center;
    margin: 0 auto;
    width: 40%;
  }

  .block {
    width: 50%;
    margin: 0 auto;
  }
</style>
